<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in props.todoList"
        :key="item.title"
        style="margin: 15px 0"
      >
        <span
          :style="{
            color: item.status === '0' ? 'red' : 'green',
            'margin-right': '50px',
          }"
          >{{ item.title }}</span
        >
        <el-button @click="remove(index)">删除</el-button>
        <el-button v-show="item.status !== '1'" @click="complete(index)"
          >完成</el-button
        >
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { TodoList } from "../types/todoList.ts";

const emit = defineEmits(["remove", "complete"]);

const props = defineProps<{
  todoList: Array<TodoList>;
}>();

const remove = (index) => {
  emit("remove", index);
};

const complete = (index) => {
  emit("complete", index);
};
</script>

<style scoped></style>
